<template>
  <div ref="echarts-pie" :style="`height: ${height}`" />
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: 'EcharsPieLiquidfill',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    height: {
      type: String,
      default() {
        return '240px'
      }
    },
    legend: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      myChart: null // 用来存放图形实例
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs['echarts-pie'])
    const arr = ['middleLost', this.data, 60]
    const options = {
      title: {
        top: '55%',
        left: 'center',
        textStyle: {
          color: '#ad7c59',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontSize: 16
        },
        subtext: arr[2] + '%',
        subtextStyle: {
          color: '#185a9d',
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        left: 0,
        top: 10,
        show: true,
        itemGap: 12,
        data: this.legend,
        textStyle: {
          color: '#6AA4F5'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function(res) {
          if (res.componentSubType === 'liquidFill') {
            return res.seriesName + ':' + 100
          } else {
            return (
              '<span class="ii" style="background:' + res.color + '"></span>' + res.name + ':<br/> ' + res.data.value
            )
          }
        }
      },
      series: [
        {
          type: 'liquidFill',
          itemStyle: {
            normal: {
              opacity: 0.4,
              shadowBlur: 0,
              shadowColor: 'blue'
            }
          },
          name: arr[3],
          data: [
            {
              value: 0.4,
              itemStyle: {
                normal: {
                  color: '#53d5ff',
                  opacity: 0.6
                }
              }
            }
          ],
          color: ['#53d5ff'],
          center: ['50%', '65%'],
          label: {
            normal: {
              formatter: '',
              textStyle: {
                fontSize: 12
              }
            }
          },
          outline: {
            itemStyle: {
              borderColor: '#86c5ff',
              borderWidth: 0
            },
            borderDistance: 0
          }
        },
        {
          type: 'pie',
          center: ['50%', '65%'],
          radius: ['45%', '60%'],
          color: ['#ff9580', '#64b3ff'],
          hoverAnimation: false, // 设置饼图默认的展开样式
          label: {
            show: true,
            normal: {
              formatter: '{b}：{c}',
              show: false,
              position: ''
            }
          },
          labelLine: {
            length: 12,
            length2: 20,
            show: false
          },
          itemStyle: {
            // 此配置
            normal: {
              borderWidth: 0,
              borderColor: '#fff'
            },
            emphasis: {
              borderWidth: 0,
              shadowBlur: 2,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          data: arr[1]
        }
      ]
    }
    this.myChart.setOption(options)

    // 绑定监听事件
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
    // 销毁 Echarts 实例
    this.myChart.dispose()
  },
  methods: {
    resizeHandler() {
      // 图形根据容器大小来进行缩放
      this.myChart.resize()
    }
  }
}
</script>

